<template>
  <div class="app-container calendar-list-container"
       id="modifyPwd"
       v-loading.fullscreen="isLoading"
       element-loading-background="rgba(0, 0, 0, 0.6)"
  >

    <el-form :model="modifyTemp" :rules="rules" ref="modifyTemp" status-icon>
      <el-form-item label="原密码" prop="old_pwd">
        <el-input v-model="modifyTemp.old_pwd" type="password" placeholder="请输入原密码">
        </el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="new_pwd">
        <el-input v-model="modifyTemp.new_pwd" type="password" placeholder="请输入新密码">
        </el-input>
      </el-form-item>
      <el-form-item label="密码确认" prop="new_pwd_confirm">
        <el-input v-model="modifyTemp.new_pwd_confirm" type="password" placeholder="请再次输入新密码">
        </el-input>
      </el-form-item>
      <div style="text-align: center;padding-top: 15px">
        <el-button v-waves type="primary" size=""  style="width: 100%;" @click="handleModify">修 改 密 码</el-button>
      </div>

    </el-form>

  </div>
</template>

<script>
  import { modifyPwd } from '@/api/user'
  import waves from '@/directive/waves/index.js'

  export default {
    data() {
      var validatePwdConfirm = (rule, value, callback) => {
        if (value !== this.modifyTemp.new_pwd) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        modifyTemp: {
          old_pwd: '',
          new_pwd: '',
          new_pwd_confirm: ''
        },
        isLoading: false,
        admin_id: null,
        token: null,
        rules: {
          old_pwd: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
          ],
          new_pwd: [
            { required: true, message: '请输入新密码', trigger: 'blur' }
          ],
          new_pwd_confirm: [
            { required: true, message: '请再次输入新密码', trigger: 'blur' },
            { validator: validatePwdConfirm, trigger: 'blur' }
          ]
        }
      }
    },
    directives: {
      waves
    },
    created() {
      this.admin_id = this.$store.state.user.admin_id
      this.token = this.$store.state.user.token
    },
    methods: {
      handleModify() {
        this.$refs.modifyTemp.validate((valid) => {
          if (valid) {
            this.isLoading = true
            this.modifyTemp.admin_id = this.admin_id
            this.modifyTemp.token = this.token
            modifyPwd(this.modifyTemp).then(res => {
              this.isLoading = false
              if (res.code === 'E0000') {
                this.$notify({
                  title: '成功',
                  message: '修改成功！',
                  type: 'success',
                  duration: 2000
                })
                this.$refs.modifyTemp.resetFields()
              } else if (res.code === 'E0005') {
                this.$message({
                  message: '原密码错误',
                  type: 'error',
                  duration: 3000
                })
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>
  .app-container {
    padding: 30px;
  }
  .edit-input {
    padding-right: 100px;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }

</style>
